<template>

    <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="3" v-for="(item, index) of list" :key="index">
            <div class="card_wrap">
                <div :class="`icon ${item.icon}`" :style="`color:${item.color}`"></div>
                <div class="name">{{item.name}}</div>
            </div>
        </el-col>
    </el-row>

</template>

<script>

import { mapGetters } from 'vuex'
export default {
    name: 'CardBoxItem',
    components: {
    },
    data() {
        return {
            list: [
                {name: '用户', icon: 'el-icon-user-solid', color: 'rgb(105, 192, 255)'},
                {name: '分析', icon: 'el-icon-s-data', color: 'rgb(149, 222, 100)'},
                {name: '商品', icon: 'el-icon-shopping-cart-full', color: 'rgb(255, 156, 110)'},
                {name: '订单', icon: 'el-icon-s-order', color: 'rgb(179, 127, 235)'},
                {name: '票据', icon: 'el-icon-tickets', color: 'rgb(255, 214, 102)'},
                {name: '消息', icon: 'el-icon-chat-dot-square', color: 'rgb(92, 219, 211)'},
                {name: '标签', icon: 'el-icon-price-tag', color: 'rgb(255, 133, 192)'},
                {name: '配置', icon: 'el-icon-set-up', color: 'rgb(255, 192, 105)'},
            ]
        }
    },
    computed: {
        ...mapGetters(['user'])
    },

    created() {
    },

    mounted() {
        this.$nextTick(() => {
        })
    },

    methods: {


    }

}
</script>

<style lang="scss" scoped>
.card_wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    height: 100px;
    justify-content: center;
    background: #fff;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    .icon{
        font-size: 30px;
        margin-bottom: 10px;
    }
    .name{

    }
    &:hover{
        color: red
    }
}
</style>
